import { markRaw } from 'vue'
import { Edit, Link } from '@element-plus/icons-vue'
import type { Plugin, PluginConfig, PluginComponent } from '../types'
import { ComponentGroupEnum } from '@/types'

// 模拟远程组件配置
const remoteComponentsConfig: PluginConfig = {
    name: 'remote-components',
    version: '1.0.0',
    components: [
        {
            metadata: {
                type: 'remote-input',
                category: 'form',
                label: '远程输入框',
                group: ComponentGroupEnum.FORM,
                icon: markRaw(Edit)
            },
            props: {
                base: {
                    modelValue: '',
                    label: '远程输入框',
                    placeholder: '请输入'
                },
                style: {}
            },
            template: `
                <el-form-item :label="props.base.label">
                    <el-input
                        :model-value="props.base.modelValue"
                        :placeholder="props.base.placeholder"
                        @update:model-value="value => emit('update:modelValue', value)"
                    />
                </el-form-item>
            `
        },
        {
            metadata: {
                type: 'remote-link',
                category: 'auxiliary',
                label: '远程链接',
                group: ComponentGroupEnum.AUXILIARY,
                icon: markRaw(Link)
            },
            props: {
                base: {
                    type: 'primary',
                    href: 'https://example.com',
                    target: '_blank',
                    content: '点击访问'
                },
                style: {}
            },
            template: `
                <el-link
                    :type="props.base.type"
                    :href="props.base.href"
                    :target="props.base.target"
                >
                    {{ props.base.content }}
                </el-link>
            `
        }
    ]
}

// 模拟API调用
export async function fetchRemoteComponents(): Promise<Plugin> {
    // 模拟网络延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 返回插件配置
    return {
        config: remoteComponentsConfig,
        setup: async () => {
            console.log('Remote components plugin setup')
        },
        destroy: async () => {
            console.log('Remote components plugin destroyed')
        }
    }
} 